<template>
  <div>
    <div class="demo-inner-divider">rate 基础</div>
    <div>
      <e-rate v-model="value" @on-change="onChange"></e-rate>
    </div>
    <div class="demo-inner-divider">半星</div>
    <div>
      <e-rate allow-half v-model="valueHalf" />
    </div>
    <div class="demo-inner-divider">提示文字</div>
    <div>
      <e-rate show-text v-model="valueText" />
    </div>
    <div>
      <e-rate show-text allow-half v-model="valueCustomText">
        <span style="color: #f5a623">{{ valueCustomText }}</span>
      </e-rate>
    </div>

    <div class="demo-inner-divider">只读</div>
    <div>
      <e-rate disabled v-model="valueDisabled" />
    </div>
    <div class="demo-inner-divider">可清除</div>
    <div>
      <e-rate clearable v-model="value1" /> clearable: true
    </div>
    <div>
      <e-rate v-model="value2" /> clearable: true 
    </div>

    <div class="demo-inner-divider">自定义图标</div>
    <div>
      <e-rate v-model="value3" character="A" />
    </div>
    <div>
      <e-rate v-model="value4" icon="label"></e-rate>
    </div>
    <rate-md class="markdown-body"></rate-md>
  </div>
</template>

<script>
import rateMd from "../../docs/rate.md"
export default {
  data(){
    return {
      value:0,
      valueHalf:3.5,
      valueText:3,
      valueCustomText:3.2,
      valueDisabled:2,
      value1:2,
      value2:3,
      value3:1,
      value4:2
    }
  },
  components:{
    rateMd
  },
  methods:{
    onChange(val){
      console.log('val',val)
    }
  }
}
</script>

<style>

</style>